<template>
  <div>
    <p>eat: {{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = '🍜'">update</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
    })

    /* watch(obj, () => {
      console.log('触发~~')
    }) */

    // !对 obj.hobby 的修改会触发监听吗？不会，只有对【内部】数据的修改才会触发监听
    /* watch(obj.hobby, () => {
      console.log('触发~~')
    }) */

    // !把 obj.hobby 当做普通数据去监听，只有修改 obj.hobby 【本身】才会触发监听
    /* watch(() => obj.hobby, () => {
      console.log('触发~~')
    }) */
    // !如何对本身的修改和内部数据的修改都触发监听呢(把上面两种情况结合起来)
    // 对 obj.hobby 的修改 和 对 obj.hobby 内部数据的修改都会触发监听
    watch(() => obj.hobby, () => {
      console.log('触发~~')
    }, {
      deep: true
    })
    // 监听“简单”数据类型，通过函数返回这个简单数据类型
    /* watch(() => obj.hobby.eat, () => {
      console.log('触发~~')
    }) */

    // watch 监听的目标只能是啥？ref、reactive、() => 普通数据、[ref、reactive、() => 普通数据]
    return {
      obj
    }
  }
}
</script>

<style lang="scss" scoped></style>